<template>
    <div v-if="detailStatus" class="m-edit-modal">
        <div class="header">
            {{title}}
            <span @click="close"><Icon type="close-round"></Icon></span>
        </div>
        <div class="m-content">

            <Form ref="myData" :model="detailData" :rules="ruleValidate" :label-width="100" style="width: 900px"
                  :inline="true">

                <Row>
                    <FormItem label="结算方式名称" prop="settlement_way_name">
                        <Input type="text" placeholder="请输入..." v-model="myData.settlement_way_name" style="width: 200px"/>
                    </FormItem>
                </Row>

                <Row>
                    <FormItem label="结算方式周期" prop="settlement_cycle">
                        <Select v-model="myData.settlement_cycle"  style="width: 200px">
                            <Option value="workDay">工作日</Option>
                            <Option value="everyDay">每天</Option>
                        </Select>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="状态" prop="status">
                        <Select v-model="myData.status"  style="width: 200px">
                            <Option value="1">有效</Option>
                            <Option value="2">无效</Option>
                        </Select>
                    </FormItem>
                </Row>

                <FormItem>
                    <Button type="primary" @click="handleSubmit('myData')">提交</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>
<script>

    import API from '../../config/api'
    import qs from 'qs'
    import {formatDateTime, checkTel} from '../../config/utils'

    import UE from '../../components/ue/ue.vue';

    export default {
        props: ['detailStatus', 'detailData', 'title'],
        watch: {
            testPar(val) {
                if(val.indexOf("add")<0){
                    this.disabledFlag=true;
                }else{
                    this.disabledFlag=false;
                }

            }
        },
        data() {
            return {
                disabledFlag:false,
                dealerstop: 1,
                ruleValidate: {
                    settlement_way_name:[
                        {required:true,message: '结算方式名称不能为空', trigger: 'blur'}
                    ],
                    settlement_cycle: [
                        {required: true, message: '结算方式周期不能为空', trigger: 'blur'}
                    ],
                    status: [
                        {required: true, message: '状态不能为空', trigger: 'blur'}
                    ],
                },
                defaultMsg: '',

            }
        },
        methods: {
            saveContentInfo() {
                let vm = this ;
                let  params = qs.stringify( this.myData);
                this.axios.post("/zscar-api/settlement_way/save?"+ params).then(response=>{
                    if (response.data.code === 1) {
                        vm.$Message.success(response.data.msg)
                        this.close();
                    } else {
                        vm.$Message.error(response.data.msg);
                    }
                }, error=>{

                });

            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {

                            this.saveContentInfo();


                    } else {
                        this.$Message.error('请完善信息!');
                    }
                })
            },
            close() {
                this.$emit('closeModal')
            },
        },
        computed: {
            myData() {
                return this.detailData;
            }
        },
        created() {

        }
    }
</script>
<style lang='scss' scoped>
    .m-edit-modal {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 100;

        .header {
            background-color: #f8f8f9;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            padding-left: 25px;
            padding-right: 5px;
            color: #000;
            box-shadow: 1px 1px 1px rgba(220, 172, 172, .5);

            span {
                float: right;
                padding: 0 20px;
                cursor: pointer;
            }

        }
        .m-content {
            margin-top: 20px;
            padding-bottom: 100px;
            overflow-y: auto;
        }

        .list-header {
            height: 45px;
            color: #333;
            line-height: 45px;
        }

        .list-row {
            padding-left: 100px;
            font-size: 14px;
            line-height: 40px;
        }

    }
</style>
